<template>
    <div>
        <div ref="Pie" :style="styleClass" element-loading-text="获取数据中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"></div>
    </div>
</template>
<script setup lang='ts'>
import { onMounted, onBeforeUnmount, reactive, getCurrentInstance } from 'vue';

//***引入
import * as echarts from 'echarts';
import { object, array } from 'vue-types';

const props = defineProps({
    styleClass: {
        type: Object,
        default: false
    },

    chartData: {
        type: Array<any>,
        default: false
    },
});

const data = reactive(props.chartData)

let myChart: any = null

const color = [
    '#66FFFF',
    '#FFE457',
    '#5C64FF',
    '#2DE1FD',
    '#0056FF',
    '#5AD8A6',
];
const indexNumber = 60;
const legendData = data.map((item, index) => {
    const tag = index % 6;
    return {
        'name': item.name,
        itemStyle: {
            color: color[tag] || '',
        },
        textStyle: {
            rich: {
                title: {
                    color: '#CDCEDA',
                    fontSize: 14,
                    width: 70,
                    fontWeight: 'bold',
                },
                value: {
                    fontSize: 14,
                    color: '#fff',
                    width: 55,
                    fontWeight: 'bold',
                },
                p: {
                    fontSize: 14,
                    width: 55,
                    color: '#02D0C5',
                    shadowColor: '#000',
                    inactiveColor: '#000',
                    fontWeight: 'bold',
                },
            },
        },
    };
});

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const initChart = () => {
    let Pie = proxy?.$refs.Pie
    // @ts-ignore
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(Pie);
    // 指定图表的配置项和数据
    let option = {
        // backgroundColor: '#000',
        // legend: {
        //     type: 'scroll',
        //     show: true,
        //     orient: 'vertical',
        //     right: 0,
        //     top: 'center',
        //     padding: [
        //         0,
        //         2,
        //         0,
        //         0,
        //     ],
        //     itemGap: 16,
        //     borderRadius: 5,
        //     itemWidth: 10,
        //     icon: 'circle',
        //     itemHeight: 10,
        //     inactiveColor: '#ccc',
        //     data: legendData,
        //     formatter: function (name: any) {
        //         console.log('name', name);
        //         const name1 = name.length > 5 ? `${name.substring(0, 4)}...` : name;
        //         const value = data.filter((item) => item.name === name)[0].value;
        //         const proportion = data.filter((item) => item.name === name)[0].proportion;
        //         return (
        //             `{title|${name1
        //             }}{value|${Number(value)
        //             }个}{p|${proportion
        //             }%}`
        //         );
        //     },
        // },
        graphic: [{
            type: 'text',
            z: 100,
            left: '20%',
            top: '43%',
            style: {
                fill: '#FFE457',
                text: indexNumber + '%',
                font: '18px Microsoft YaHei',
            },
        }],
        tooltip: {
            trigger: 'item',
            formatter: (data: any) => {
                const { name = '', value = '', proportion = '' } = data.data || {};
                const name1 = name.length > 10 ? `${name.substring(0, 10)} <br /> ${name.substring(10, name.length)}` : name;
                return `${name1}  ${value}万 ${proportion}%`;
            },
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: [
                    '35%',
                    '80%',
                ],
                center: [
                    '35%',
                    '50%',
                ],
                startAngle: 90,
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 103, 255, 0.2)',
                    shadowOffsetX: -5,
                    shadowOffsetY: 5,

                    color: function (params: any) {
                        return color[params.dataIndex % 6];
                    },
                },
                label: {
                    show: false,
                },
                labelLine: {
                },
                data: data,
            },
            {
                itemStyle: {
                    color: 'RGBA(6, 9, 69, 0.6)',
                },
                z: 10,
                type: 'pie',
                radius: [
                    '35%',
                    '55%',
                ],
                center: [
                    '35%',
                    '50%',
                ],
                emphasis: {
                    disabled: false,
                    scale: false,
                },

                labelLine: {
                    show: false,
                },
                tooltip: {
                    show: false,
                },
                data: [
                    {
                        value: 100,
                    },
                ],
            },
        ],
    }
    option && myChart.setOption(option);

}



window.addEventListener("resize", () => {
    myChart.resize()
});

//*** 挂载Echarts
onMounted(() => {
    initChart()
})

onBeforeUnmount(() => {
    window.removeEventListener('resize', () => {
        myChart.resize()
    });
    // ResizeListener.uninstall(myChart)
})



</script>